<template>
  <div class="registBox">
    <div class="logo"></div>
    <div class="registPhone">
      <div class="header">账号注册</div>
      <div class="regist-center">
        <input
          type="text"
          class="nickname ipt"
          v-model="nickname"
          placeholder="你的昵称"
        />
        <input
          type="password"
          class="password ipt"
          v-model="password"
          placeholder="你的密码"
        />
        <input
          type="password"
          class="repassword ipt"
          v-model="repassword"
          placeholder="确认密码"
        />
        <button class="btn" @click="regPassword">完成注册</button>
        <router-link to="/">返回首页</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { registPhone } from "../../api/registOrLogin";

export default {
  name: "Regist",
  data() {
    return {
      nickname: "",
      password: "",
      repassword: "",
      phone: "",
    };
  },
  mounted() {
    if (!localStorage.getItem("username")) {
      this.$router.history.push({
        name: "LoginOrRegist",
      });
    }
    this.phone = localStorage.getItem("username");
    // document.documentElement.style.backgroundImage =
    //   "url(https://images.mafengwo.net/images/signup/wallpaper/35.jpg)";
  },
  beforeDestroy() {
    localStorage.removeItem("username");
  },
  methods: {
    async regPassword() {
      let regpassword = /^[0-9A-Za-z]{6,18}$/;
      let { password, nickname, phone } = this;
      if (
        nickname &&
        regpassword.test(password) &&
        password === this.repassword
      ) {
        console.log(phone, password);
        await registPhone(phone, password);
        /* axios.post(
          "/api/register",
          { username: phone, password },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
          }
        ); */
        // console.log(1);
        alert("注册成功");
      } else {
        alert("密码错误或不规范,昵称不能为空");
      }
    },
  },
};
</script>

<style scoped>
.registBox {
  width: 100%;
  height: 100%;
  background-image: url("https://images.mafengwo.net/images/signup/wallpaper/21.jpg");
}
.ipt {
  outline: none;
  width: 320px;
  height: 40px;
  box-sizing: border-box;
  padding: 6px 0 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f6f7f9;
  transition: border 1s, box-shadow 0.5s;
}
.btn {
  border: none;
  border-radius: 6px;
  width: 100%;
  height: 42px;
  margin-top: 17px;
  background-color: #ffa200;
  color: white;
  font-size: 20px;
  cursor: pointer;
}
.ipt:focus {
  border: 1px solid #ffa200;
  background-color: white;
  box-shadow: 0 0 5px #ffa200;
}
.registBox .logo {
  margin: 0px auto 10px;
  width: 75px;
  height: 90px;
  background-image: url("../../../public/images/logo-new.png");
  background-position: 0 20px;
  background-repeat: no-repeat;
}
.registBox .registPhone {
  background-color: white;
  width: 318px;
  height: 470px;
  border-radius: 4px;
  margin: auto;
  padding: 0 26px;
}
.registBox .header {
  width: 100px;
  height: 57px;
  line-height: 57px;
  font-size: 18px;
  color: #999;
  /* border-bottom: 1px solid #d8d8d8; */
}
.registBox .regist-center {
  margin-top: 20px;
}
.registBox .regist-center .ipt {
  margin-bottom: 15px;
}
</style>
